<template>
  <div class="personCenter">
    <div class="partOne">
      <div class="w">
        <div class="tool">
          <div class="head_pic"></div>
          <div class="change_background"></div>
          <div class="scan"></div>
          <div class="envelope"></div>
        </div>
        <div class="intro">
            <router-link :to="{path:'/person_page'}">个人主页  ></router-link>
        </div>

      </div>
    </div>
    <div class="partTwo"></div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>
.personCenter {
  width: 100%;
  height: 605px;
  .partOne {
    
    height: 37%;
    width: 100%;
    color: white;
    background-color: #9c90fe;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    overflow: hidden;
    .w {
      margin: auto;
      width: 90%;
      height: 100%;
      position: relative;

        .tool {
        height: 34px;
        margin-top: 20px;
        display: flex;
        width: 100%;
        justify-content: space-between;

        .head_pic {
            width: 10%;
            margin-right: 140px;
            border: 1px solid black;
            border-radius: 50%;
        }
        .change_background {
            width: 10%;
            border: 1px solid black;
        }
        .scan {
            width: 10%;
            border: 1px solid black;
        }
        .envelope {
            width: 10%;
            border: 1px solid black;
        }
        }
        .intro {
        height: 130px;
        border: 1px solid gainsboro;
        position: absolute;
        bottom: 0;
        width: 100%;
        }
    }

  }
  .partTwo {
    height: 63%;
    width: 100%;
  }
}
</style>